<template>
  <div class="containers">
    <swiper
      :modules="modules2"
      :loop="true"
      :slides-per-view="0"
      :space-between="0"
      :speed="900"
      :autoplay="{ delay: 3000, disableOnInteraction: false }"
      :navigation="navigation2"
      :slidesPerView="'auto'"
      loopFillGroupWithBlank="true"
      :pagination="false"
      :centeredSlides="true"
      class="swiper-container2"
    >
      <swiper-slide v-for="(item, i) in 4" :key="i">
        <div class="banner">
          <img :src="getAssetsFile(`slide${i + 1}.png`)" alt="">
        </div>
      </swiper-slide>
    </swiper>
    <img ref="prevRef" class="leftArrow" :src="state.LeftArrow" />
      <img ref="nextRef" class="rightArrow" :src="state.RightArrow" />
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue'
import {
  Navigation,
  Pagination,
  Scrollbar,
  Autoplay
} from 'swiper/modules'
import 'swiper/css'
import LeftArrow from '../assets/arrow_left.png'
import RightArrow from '../assets/arrow_right.png'

const state = reactive({
  LeftArrow: LeftArrow,
  RightArrow: RightArrow,
})
const navigation2 = ref({
  prevEl: '.leftArrow',
  nextEl: '.rightArrow'
})

const modules2 = [Autoplay, Pagination, Navigation, Scrollbar]

function getAssetsFile(url) {
  return new URL(`../assets/${url}`, import.meta.url)
}
</script>

<style lang="scss" scoped>
.containers {
  width: 100%;
  overflow: visible !important;
  justify-content: center;
  position: relative;
}

.swiper-container2 {
  // overflow: visible !important;
  position: relative;
  width: 1056px;
  height: 475px;
  padding-left:22px;
  padding-top:2px;
  position: relative;
  overflow: hidden;
  margin-top:12px;
}

.banner{
  width:1034px;
  height: 474px;
}
.leftArrow {
  position: absolute;
  top: 50%;
  left: -68px;
  z-index: 1000;
  transform: translateY(-50%);
  cursor: pointer;
}

.rightArrow {
  position: absolute;
  top: 50%;
  right: -68px;
  z-index: 1000;
  transform: translateY(-50%);
  cursor: pointer;
}

//页码样式穿透 也可自定义页码
:deep(.swiper-pagination) {
  bottom: 20px;
}
:deep(.swiper-pagination-bullet) {
  border: solid 1px #999;
  margin: 0 6px;
}
:deep(.swiper-pagination-bullet-active) {
  background: #4d4d4d;
}
:deep(.swiper-pagination-bullet:hover) {
  background: #4d4d4d;
  opacity: 0.6;
}
:deep(.swiper-slide) {
  width:100%;
  position: relative;
  border-radius: 15px;
  transition: transform 2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
:deep(.swiper-slide-prev) {
  transform: scale(0.9);
}
:deep(.swiper-slide-next) {
  transform: scale(0.9);
}
:deep(.swiper-slide-active) {
}
</style>
